<template>
  <div class="home">
    <h1>This is an home page</h1>
    <!-- <div>{{obj}}</div> -->
    <!-- <div>{{arr}}</div> -->
    <!-- //1.2 -->
    <!-- <div>{{arr.list}}</div> -->

    <!-- //3.1 -->
    <!-- <div>{{obj.name}}</div>
    <div>{{obj.age}}</div> -->

    <!-- //3.2 3.3 -->
    <div>{{name}}</div>
    <div>{{age}}</div>

    <button @click="add">新增</button>
  </div>
</template>


<script>
import { reactive , ref, toRefs } from 'vue';
export default {
  //? setup函数内是没有this关键字的
  setup() {
    //1 reactive定义响应式数据(转换响应式数据)，无法将基本类型的数据转换为响应式数据(会将原始数据包装成一个Proxy类型的对象)
    // var obj = reactive({})
    //1.1
    // var arr = reactive([])
    //1.2
    // var arr = reactive({list:[]})

    //3.1 3.2 3.3
    var obj = reactive({ name: 'ljq', age: 10 })


    setTimeout(() => {
      obj.name = 'zh';
        obj.age = 13;
      
    }, 100)
    
    return {
      // 3.1
      // obj
      //3.2
      // ...obj,//3.2 这个写法会让reactive定义的响应式数据中每个属性丢失响应式
      ...toRefs(obj)//3.3 会将obj对象的每个属性都转换为一个RefImpl类型的对象
    }


    //2 ref定义响应式数据，可以将任何类型数据转换为响应式数据(ref会将原始数据包装成一个RefImpl类型的对象)
    //2 在script中获取ref类型的数据值：数据.value
    //2 在script中修改ref类型的数据值：数据.value = 新值
    //2 在template中使用ref类型的数据不需要特意加.value
    // var arr = ref([]) 
    // var obj = ref(false)

    //1 定义方法
    // var add=()=>{
      // arr.push(parseInt(Math.random()*10))
      //1.1 这样进行赋值会失去响应式
      // arr = [1, 2, 3, 4]

      // 1.2 如果数据是来自其他地方（服务器，其他组件）保存数据到其他状态时，为了避免组件状态的响应式丢失，可以采用{}的形式来定义，赋值时只是给对象的某个属性赋值
      //1.2
      // arr.list = [1, 2, 3, 4,5]
      //1.1
      // console.log(arr);
      //1.2
      // console.log(arr);
    // }

    //2 定义方法
    // var add = () => {
      // arr.value.push(parseInt(Math.random() * 10))
      // arr.value=[1,2,3,4]
      // obj.value = !obj.value
      // console.log(arr.value);
    // }

    // return {
    //   obj,
    //   arr,
    //   add
    // }


  }
}  
</script>

<style scoped>

</style>